<template> 
    <div class="order-list-container">
        <!-- 导航栏组件 -->
        <TmallNavBar>
            <template #left><i class="icon iconfont icon-zuojiantou" @click.stop="$router.push({path: '/me'})"></i></template>
            <template #default>我的订单</template>
            <template #right><i class="icon iconfont icon-shouye1" @click="$router.push({path: '/'})"></i></template>
        </TmallNavBar>

        <!-- 搜索商品盒子 -->
		<div class="order-search-box">
			<div class="search-bar">
				<van-search
					placeholder="请输入商品名称"
					shape="round"
					background="#27BA9B"
					v-model="params.goods_name"
					style="width: 85%;"
				/>

				<div @click="searchOrder" class="search-btn">搜索</div>
			</div>
		</div>

        <!-- 订单数据 -->
        <div class="order-list">
            <van-tabs 
                v-model:active="currentTab" 
                animated 
                @click-tab="onClickTab"
            >
                <van-tab 
                    v-for="(item,index) in orderTabs"
                    :title="item.title"
                    :key="index"
                >
                    <van-list
                        v-model:loading="loading"
                        :finished="finished"
                        :finished-text="params.page_size < total ? '我也是有底线的~' : ''"
                        @load="onLoadMore"
                    >

                        <!-- 骨架屏 -->
                        <van-skeleton v-if="isShowSkeleton">
                            <template #template>
                                <div class="ols-skeleton">
                                    <div class="ols-skeleton-item" v-for="(item) in skeletonLength" :key="item">
                                        <div class="ols-title-box">
                                            <van-skeleton-paragraph class="ols-title" row-width="45%"/>
                                            <van-skeleton-paragraph class="ols-title" row-width="20%"/>
                                        </div>

                                        <div class="ols-body-box">
                                            <van-skeleton-image />
                                            <div class="ols-body-item">
                                                <van-skeleton-paragraph class="ols-body-text" v-for="(item) in 3" :key="item"/>
                                            </div>
                                        </div>

                                        <div class="ols-price-box">
                                            <van-skeleton-paragraph class="ols-price-total" row-width="20%"/>
                                            <van-skeleton-paragraph class="ols-price" row-width="25%"/>
                                        </div>

                                        <van-skeleton-paragraph style="height: 1px;"/>

                                        <div class="ols-footer-box">
                                            <van-skeleton-paragraph class="ols-footer-item" row-width="30%"/>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </van-skeleton>
                        <div v-else>
                            <!-- 订单数据 -->
                            <div class="orders" ref="orderListRef" v-if="orderList.length > 0">
                                <div class="card" v-for="item in orderListComputed" :key="item.oid">
                                    <!-- 订单信息 -->
                                    <div class="status">
                                        <span class="date">{{ item.create_time }}</span>
                                        <!-- 订单状态文字 -->
                                        <template v-for="(orderStatusItem, index) in orderStatusItems" :key="index">
                                            <span v-if="item.status == orderStatusItem.value">
                                                <van-tag :color="orderStatusItem.color" mark type="primary" size="medium">{{ orderStatusItem.value_txt }}</van-tag>
                                            </span>
                                        </template>
                                    </div>


                                    <!-- 商品信息，点击商品跳转到订单详情，不是商品详情 -->
                                    <div class="goods"
                                        v-for="orderItem in item.orderItems" :key="orderItem.id"
                                        @click="$router.push('/orderDetail?oid='+orderItem.oid)"
                                    >
                                        <div class="cover">
                                            <van-image :src="global.MINIO_FILE_DOMAIN + orderItem.goods_cover_url" />
                                        </div>

                                        <div class="meta">
                                            <div class="name ellipsis">{{ orderItem.goods_name }}</div>
                                            <div class="type">{{ orderItem.goods_sku_text }}</div>

                                            <!-- 待评价状态: 展示评价按钮 -->
                                            <div class="comment-btn-box" v-if="[6].includes(orderItem.status) && item.orderItems.length > 1">
                                                <van-button 
                                                    @click.stop="handleShowCommentPopup(orderItem)"
                                                    size="mini"
                                                    style="width: 30%;margin-top: 10px;"
                                                    color="#27BA9B"
                                                >评价</van-button>
                                            </div>

                                            <!-- 已完成状态: 展示追加评价按钮 -->
                                            <div class="comment-btn-box" v-if="[7].includes(item.status) && item.orderItems.length > 1">
                                                <van-button 
                                                    @click.stop="handleShowCommentPopup(orderItem)"
                                                    size="mini"
                                                    style="width: 30%;margin-top: 10px;"
                                                    color="#27BA9B"
                                                >追加评价</van-button>
                                            </div>
                                        </div>
                                    </div>


                                    <!-- 支付信息 -->
                                    <div class="payment">
                                        <span class="quantity">共{{ item.amount }}件商品</span>
                                        <span>实付</span>
                                        <div class="amount">
                                            <span class="symbol">¥</span>
                                            <span>{{ (item.pay_money/100).toFixed(2) }}</span>
                                        </div>
                                    </div>

                                    <!-- 订单操作按钮 -->
                                    <div class="action">
                                        <!-- 待付款状态：显示去支付按钮 -->
                                        <template v-if="item.status == 0">
                                            <div @click="showCancelOrder(item.oid)" class="button">取消订单</div>
                                            <div @click="handleOrderPay(item.oid)" class="button primary">去支付</div>
                                        </template>
                                        <template v-else>
                                            <!-- 待评价/已完成/已取消 状态: 展示删除订单按钮 -->
                                            <div 
                                                v-if="[-1,6,7].includes(item.status)"
                                                class="button delete"
                                                @click="handleDeleteOrder(item.oid)"
                                            >删除订单</div>

                                            <div class="button secondary"
                                                @click="$router.push('/goodsDetail?goods_id=' + item.orderItems[0].goods_id)"
                                            >再次购买</div>

                                            <!-- 待发货状态：展示退款按钮 -->
                                            <div v-if="[1,2,3,4,5].includes(item.status)" 
                                                class="button refund" @click="handleRefundOrder(item.oid)"
                                            >退款</div>

                                            <!-- 待收货状态: 展示确认收货按钮 -->
                                            <div v-if="[3,4,5].includes(item.status)" 
                                                class="button primary" @click="handleConfirmOrder(item.oid)"
                                            >确认收货</div>

                                            <!-- 待评价状态: 展示评价按钮 -->
                                            <div v-if="[6].includes(item.status) && item.orderItems.length == 1" 
                                                class="button primary" @click="handleShowCommentPopup(item.orderItems[0])"
                                            >评价</div>

                                            <!-- 已完成状态: 展示追加评价按钮 -->
                                            <div v-if="[7].includes(item.status) && item.orderItems.length == 1" 
                                                class="button primary" @click="handleShowCommentPopup(item.orderItems[0])"
                                            >追加评价</div>
                                        </template>
                                    </div>
                                </div>
                            </div>
                            <!-- 空状态 -->
                            <div class="blank" v-else>
                                <van-image :src="blankImage" class="image" />
                                <span class="text">您还没有订单哟</span>
                                <van-button class="button" to="/">去首页看看</van-button>
                            </div>
                        </div>
                    </van-list>
                </van-tab>
            </van-tabs>
        </div>

        <!-- 返回顶部组件 -->
        <van-back-top right="5vw" bottom="5vh" />

        <!-- 取消订单弹窗 -->
        <van-popup
            v-model:show="isShowPopup"
            position="bottom"
            background-color="#fff"
        >
            <div class="popup-root">
                <div class="title">订单取消</div>
                <div class="description">
                <div class="tips">请选择取消订单的原因：</div>
                <div
                    class="cell"
                    v-for="item in reasonList"
                    :key="item"
                    @click="reason = item"
                >
                    <span class="text">{{ item }}</span>
                    <span class="icon iconfont" :class="item === reason ? ' icon-checked icon-xuanzhong' : 'icon-weixuanzhong'"></span>
                </div>
                </div>
                <div class="footer">
                <div class="button" @click="isShowPopup = false">取消</div>
                <div @click="confirmCancelOrder()" class="button primary">确认</div>
                </div>
            </div>
        </van-popup>

        <!-- 评价弹层 -->
        <van-popup
            v-model:show="isShowCommentPopup"
            position="bottom"
            closeable
            background-color="#fff"
        >
            <div class="comment-popup">
                <div class="comment-title">评价商品</div>
                <div class="comment-description">
                    <van-form @submit="onSubmit">
                        <div class="goods-box">
                            <!-- 商品封面 -->
                            <div class="goods-cover-box">
                                <img class="goods-cover" :src="global.MINIO_FILE_DOMAIN + commentGoods.goods_cover_url" />
                            </div>
                            <div class="goods-name-sku-box">
                                <div class="goods-sku">{{ commentGoods.goods_sku_text }}</div>
                                <div class="goods-name ellipsis">{{ commentGoods.goods_name }}</div>
                            </div>
                        </div>

                        <!-- 评价内容 -->
                        <van-cell-group inset>
                            <van-field
                                v-model="formParams.contents"
                                name="评价内容"
                                rows="2"
                                type="textarea"
                                maxlength="100"
                                autosize
                                placeholder="请输入评价内容"
                                show-word-limit
                                :rules="[{ required: true, message: '请输入评价内容' }]"
                            />
                        </van-cell-group>

                        <!-- 上传图片 -->
                        <div class="upload-image-box">
                            <van-uploader v-model="imageList" multiple :max-count="4" :after-read="afterRead"/>
                        </div>

                        <!-- 评分 -->
                        <div class="rate-box" v-if="status == 6">
                            <!-- 综合评价 -->
                            <div class="rate-item">
                                <span class="rate-text">综合评价</span>
                                <van-rate
                                    v-model="formParams.composite_score"
                                    :size="25"
                                    color="#27BA9B"
                                    void-icon="flower-o"
                                    icon="flower-o"
                                    void-color="#eee"
                                />
                            </div>
                            <!-- 描述相符 -->
                            <div class="rate-item">
                                <span class="rate-text">描述相符</span>
                                <van-rate
                                    v-model="formParams.conform_score"
                                    :size="22"
                                    color="#27BA9B"
                                    void-icon="star"
                                    void-color="#eee"
                                />
                            </div>
                            <!-- 物流服务 -->
                            <div class="rate-item">
                                <span class="rate-text">物流服务</span>
                                <van-rate
                                    v-model="formParams.logistic_score"
                                    :size="22"
                                    color="#27BA9B"
                                    void-icon="star"
                                    void-color="#eee"
                                />
                            </div>
                            <!-- 服务态度 -->
                            <div class="rate-item">
                                <span class="rate-text">服务态度</span>
                                <van-rate
                                    v-model="formParams.serve_score"
                                    :size="22"
                                    color="#27BA9B"
                                    void-icon="star"
                                    void-color="#eee"
                                />
                            </div>
                        </div>
                        <div style="margin: 16px;">
                            <van-button round block type="primary" native-type="submit" color="#27BA9B">
                            发&nbsp;&nbsp;布
                            </van-button>
                        </div>
                    </van-form>
                </div>
            </div>
        </van-popup>

    </div>
</template>

<script setup>
import { reqCancelOrderAPI, reqConfirmOrderAPI, reqOrderListAPI, reqPaymentOrderAPI, reqDeleteOrderAPI, reqRefundOrderAPI } from '@/apis/order'
import { reqAddGoodsCommentAPI, reqAppendGoodsCommentAPI } from '@/apis/goodsComment'
import { reqUploadImageAPI } from '@/apis/uploadFile'
import { reactive, ref, inject, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import blankImage from '@/assets/images/blank.png'
import { showConfirmDialog, showSuccessToast, showToast } from 'vant'
import { useUserStore } from '@/store/modules/user'




// -------------------------- 定义全局属性开始 --------------------------
// 全局属性
const global = inject('global')

// 路由
const route = useRoute()

// 路由器
const router = useRouter()

// 当前tab
const currentTab = ref(0)

const orderListRef = ref()

// 用户存储
const userStore = useUserStore()

// tabs 数据
const orderTabs = ref([
  { status: 0, title: '全部' },
  { status: 1, title: '待付款' },
  { status: 2, title: '待发货' },
  { status: 3, title: '待收货' },
  { status: 4, title: '待评价' },
])
// -------------------------- 定义全局属性结束 --------------------------


onMounted(() => {
    currentTab.value = parseInt(route.query.status)
    isMounted.value = true
})


// -------------------------- 切换订单状态开始 --------------------------
const onClickTab = async (e) => {
    params.status = e.name
    finished.value = false
    isShowSkeleton.value = true
    params.page = 1
    orderList.value = []
    total.value = 0

    await getOrderList()
    window.scrollTo(0,0)

    isShowSkeleton.value = false
}
// -------------------------- 切换订单状态结束 --------------------------




// -------------------------- 加载更多订单开始 --------------------------
// 是否显示骨架屏
const isShowSkeleton = ref(false)

// 是否挂载
const isMounted = ref(false)

const onLoadMore = async () => {
    // 当挂载时显示骨架屏
    if (isMounted.value) {
        isShowSkeleton.value = true
    }
	await getOrderList()
    isMounted.value = false
    isShowSkeleton.value = false
}
// -------------------------- 加载更多订单结束 --------------------------




// -------------------------- 获取订单数据开始 --------------------------
const orderListComputed = computed(() => {
    // 待付款栏时需要过滤，取消订单时能实时更新数据
    if (currentTab == 1) {
        return orderList.value.filter((item) => item.status == 0)
    } else if (currentTab == 3) {
        return orderList.value.filter((item) => [3,4,5].includes(item.status))
    }

    return orderList.value
})
// 骨架屏
const skeletonLength = ref(8)

// 完成
const finished = ref(false)

// 加载中
const loading = ref(false)

// 订单状态
const orderStatusItems = ref([])

// 订单列表
const orderList = ref([])

// 订单数量
const total = ref(0)

// 订单列表请求参数
const params = reactive({
    goods_name: '',
    status: "all",
    is_delete: '0',
    page: 1,
    page_size: 10
})


const getOrderList = async () => {
    if (finished.value == true) {
        return
    }

    loading.value = true

    params.status = currentTab.value == 0 ? "all": currentTab.value
    const result = await reqOrderListAPI(params)
    let orders = result.data.orders != null ? result.data.orders : []
    total.value = result.data.total

    // 组装订单状态数据
    orderStatusItems.value = []
    result.data.status_items.forEach(item => {
        let color = ''
        if (item.value == 0) {
            color = '#FF4339'
        } else if (item.value == 1) {
            color = '#27BA9B'
        } else if ([-1,-2,-3,-5].includes(item.value)) {
            color = '#BBBBBB'
        } else if ([6].includes(item.value)) {
            color = '#FF976A'
        } else if ([7].includes(item.value)) {
            color = '#7232dd'
        } else if ([8].includes(item.value)) {
            color = '#ff9240'
        } else if ([3,4,5].includes(item.value)) {
            color = '#07C160'
        }
        item.color = color
        orderStatusItems.value.push(item)
    })

    orderList.value.push(...orders)
    if (params.page < result.data.page_total) {
        params.page++
    } else {
        finished.value = true
    }

    loading.value = false
}
// -------------------------- 获取订单数据结束 --------------------------



// ---------------------------- 确认收货功能开始 ----------------------------
const handleConfirmOrder = (oid) => {
    showConfirmDialog({
        title:'提示',
        message:'确定要确认收货吗?'
    }).then(async () => {
        await reqConfirmOrderAPI(oid)
        showSuccessToast('确认成功')

        // 当currentTab是待收货栏时，需要将该订单从列表中删除
        if (currentTab.value == 3) {
            const index = orderList.value.findIndex((item) => item.oid == orderId.value)
            orderList.value.splice(index, 1)
        } else {    
            const order = orderList.value.find((item) => item.oid == oid)
            order.status = 6
        }
    }).catch(() => {})
}
// ---------------------------- 确认收货功能结束 ----------------------------



// ---------------------------- 取消订单功能开始 ---------------------------
// 弹出层组件
const isShowPopup = ref(false)
// 取消原因列表
const reasonList = ref([
  '商品无货',
  '不想要了',
  '商品信息填错了',
  '地址信息填写错误',
  '商品降价',
  '其它',
])
// 订单取消原因
const reason = ref('')

const orderId = ref(0)

// 显示取消订单弹层
const showCancelOrder = (oid) => {
  orderId.value = oid
  reason.value = ''
  isShowPopup.value = true
}

// 确定取消订单
const confirmCancelOrder = async () => {
    // 判断取消原因
    if (reason.value == '') {
        showToast('请选择取消原因!')
        return false
    }

    // 请求
    await reqCancelOrderAPI({oid: orderId.value, cancel_reason: reason.value})
    showSuccessToast('取消成功')

    // 当currentTab是待付款栏时，需要将该订单从列表中删除
    if (currentTab.value == 1) {
        const index = orderList.value.findIndex((item) => item.oid == orderId.value)
        orderList.value.splice(index, 1)
    } else {
        const order = orderList.value.find((item) => item.oid == orderId.value)
        order.status = -1
    }

    isShowPopup.value = false
}
// ---------------------------- 取消订单功能结束 ----------------------------



// ---------------------------- 订单支付功能开始 ----------------------------
const handleOrderPay = (oid) => {
  // import.meta.env.DEV
  // 后台获取微信支付的请求参数
  // const result:any = await reqMpWxPayAPI(oid)
  // wx.requestPayment(result.data)

  

    showConfirmDialog({
        title:'提示',
        message:'当前支付功能仅模拟模式?'
    }).then(async () => {
        await reqPaymentOrderAPI(oid)

        showSuccessToast('支付成功')

        // 当currentTab是待付款栏时，需要将该订单从列表中删除
        // if (currentTab.value == 1) {
        //     const index = orderList.value.findIndex((item) => item.oid == oid)
        //     orderList.value.splice(index, 1)
        // } else {
        //     const order = orderList.value.find((item) => item.oid == oid)
        //     order.status = 1
        // }

        setTimeout(() => {
            router.push({path: '/paymentResult', query: {oid}})
        }, 1000)

    }).catch(() => {})
}
// ---------------------------- 订单支付功能结束 ----------------------------



// ---------------------------- 删除订单功能开始 ----------------------------
const handleDeleteOrder = async (oid) => {
    showConfirmDialog({
        title:'提示',
        message:'删除的订单可以在电脑端查看!'
    }).then(async () => {
        await reqDeleteOrderAPI(oid)

        showSuccessToast('删除成功')

        const index = orderList.value.findIndex((item) => item.oid == oid)
        orderList.value.splice(index, 1)
    }).catch(() => {})
}
// ---------------------------- 删除订单功能结束 ----------------------------



// ---------------------------- 退款订单功能开始 ----------------------------
const handleRefundOrder = (oid) => {
    showConfirmDialog({
        title:'提示',
        message:'确定要退款吗?'
    }).then(async () => {
        await reqRefundOrderAPI(oid)

        showSuccessToast('退款成功')

        const index = orderList.value.findIndex((item) => item.oid == oid)
        orderList.value.splice(index, 1)
    }).catch(() => {})
}
// ---------------------------- 退款订单功能结束 ----------------------------



// ---------------------------- 评价商品功能开始 ----------------------------
const commentGoods = ref({})
// 表单参数
const formParams = reactive({
    oid: 0,
    order_item_id: 0,
    goods_id: 0,
    goods_name: '',
    goods_sku_id: 0,
    goods_sku_text: '',
    username: userStore.profile.user.username,
    avatar_url: userStore.profile.user.avatar_url,
    contents: '',
    image_url: '',
    composite_score: 0,
    conform_score: 0,
    logistic_score: 0,
    serve_score: 0,
    is_append: 0
})

// 图片
const imageList = ref([])

// 是否显示评价弹层
const isShowCommentPopup = ref(false)

// 选择图片之后
const afterRead = async (file) => {
    console.log('file =', file);
    
    // 图片类型限制
	const imageTypes = [
		'image/jpg',
		'image/jpeg',
		'image/png',
	]
	if (!imageTypes.includes(file.file.type)) {
		showToast('图片类型要求：jpeg、jpg、png')
		return false
	}

	// 图片大小限制 2M
	if (file.file.size > 1024 * 1024 * 2) {
		showToast('图片大小不能超过2M')
		return false
	}

    file.status = 'uploading'
    file.message = '上传中...'

    const {data:result} = await reqUploadImageAPI({file: file.file})
    if (result.code != 200) {
        file.status = 'failed'
        file.message = result.message
        return false
    }

    file.status = 'done'
    file.message = '上传完成'
    imageList.value.forEach(item => {
        if (item.objectUrl == file.objectUrl) {
            item.image_url = result.data.image_url
        }
    })
}

const status = ref(0)
// 处理显示评价弹层
const handleShowCommentPopup = (item) => {
    commentGoods.value = item
    formParams.oid = item.oid
    formParams.order_item_id = item.id
    formParams.goods_id = item.goods_id
    formParams.goods_name = item.goods_name
    formParams.goods_sku_id = item.goods_sku_id
    formParams.goods_sku_text = item.goods_sku_text

    status.value = item.status

    // 重置表单数据
    formParams.contents = ''
    formParams.image_url = ''
    formParams.composite_score = 0
    formParams.conform_score = 0
    formParams.logistic_score = 0
    formParams.serve_score = 0
    imageList.value = []

    // 显示评价弹层
    isShowCommentPopup.value = true
}

// 提交评价
const onSubmit = async () => {
    if (status.value == 6) {
        // 提交参数判断
        if (formParams.composite_score == 0) {
            showToast('请选择综合评分')
            return false
        }
        if (formParams.conform_score == 0) {
            showToast('请选择描述相符评分')
            return false
        }
        if (formParams.logistic_score == 0) {
            showToast('请选择物流服务评分')
            return false
        }
        if (formParams.serve_score == 0) {
            showToast('请选择服务态度评分')
            return false
        }
    }

    // 组装图片数据
    let image_url = ''
    if (imageList.value.length > 0) {
        imageList.value.forEach(value => {
            image_url += value.image_url + ','
        });
    }

    formParams.image_url = image_url.substring(0,image_url.length-1)
    if (status.value == 7) {
        formParams.is_append = 1
        // 请求追加评价接口
        await reqAppendGoodsCommentAPI(formParams)
        showSuccessToast('追评成功')
    } else {
        // 请求新增评价接口
        await reqAddGoodsCommentAPI(formParams)
        showSuccessToast('评价成功')


        // 查找订单明细，将其状态设置为：已完成
        const order = orderList.value.find(item => item.oid == formParams.oid)
        order.orderItems.forEach(item => {
            if (item.id == formParams.order_item_id) {
                item.status = 7
            }
        })

        // 判断该订单是否存在未评价的商品
        let flag = false
        order.orderItems.forEach(item => {
            if (item.status == 6) {
                flag = true
            }
        })

        // 当 currentTab 是待评价栏时，需要将该订单从列表中删除
        if (currentTab.value == 4) {
            if (!flag) {
                const index = orderList.value.findIndex((item) => item.oid == formParams.oid)
                orderList.value.splice(index, 1)
            }
        } else {
            if (!flag) {
                order.status = 7
            }
        }

    }

    isShowCommentPopup.value = false
}
// ---------------------------- 评价商品功能结束 ----------------------------




// ---------------------------- 订单搜索功能开始 ----------------------------
const searchOrder = async () => {
    // 重置数据
    isShowSkeleton.value = true
    finished.value = false

    params.page = 1
    orderList.value = []
    total.value = 0

    await getOrderList()
    window.scrollTo(0,0)

    isShowSkeleton.value = false
}
// ---------------------------- 订单搜索功能结束 ----------------------------
</script>

<style scoped lang="scss">
:deep .van-tabs__wrap {
    margin-top: 95px;
}
.ols-skeleton {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 51px;
    .ols-skeleton-item {
        margin-bottom: 40px;
        .ols-title-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            .ols-title {
                height: 30px;
            }
        }
        .ols-price-box {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-bottom: 5px;
            .ols-price-total {
                margin-right: 15px;
                height: 20px;
            }
            .ols-price {
                height: 30px;
            }
        }
        .ols-body-box {
            display: flex;
            .ols-body-item {
                flex: 1;
                margin-left: 10px;
                .ols-body-text {
                    margin-top: 10px;
                }
            }
        }
        .ols-footer-box {
            display: flex;
            justify-content: flex-end;
            margin-top: 7px;
            .ols-footer-item {
                height: 30px;
            }
        }
    }
}
.order-list-container {

    // 搜索盒子
	.order-search-box {
		position: fixed;
		width: 100%;
		z-index: 100;
        margin-top: 44px;
		.search-bar {
			display: flex;
			justify-content: center;
			align-items: center;
			background: #27BA9B;
			.search-btn {
				color: white;
				border: 1px solid white;
				padding: 6px 10px;
				border-radius: 3px;
				margin-right: 4px;
			}
		}
	}

    .order-list {
        .orders {
            display: flex;
            flex-direction: column;
            margin-top: 140px;
            overflow-y: auto;
            .card {
                min-height: 50px;
                padding: 10px;
                margin: 10px 10px 0;
                border-radius: 5px;
                background-color: #fff;

                &:last-child {
                    padding-bottom: 20px;
                }

                .status {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 15px;
                    color: #999;
                    margin-bottom: 8px;

                    .date {
                        color: #666;
                        flex: 1;
                    }

                    .primary {
                        color: #ff9240;
                    }

                    .icon-delete {
                        line-height: 1;
                        margin-left: 5px;
                        padding-left: 5px;
                        border-left: 1px solid #e3e3e3;
                    }
                }

                .goods {
                    display: flex;
                    margin-bottom: 10px;

                    .cover {
                        width: 85px;
                        height: 85px;
                        margin-right: 10px;
                        border-radius: 10px;
                        overflow: hidden;
                        position: relative;
                        image,img {
                            width: 85px;
                            height: 85px;
                        }
                    }

                    .quantity {
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        line-height: 1;
                        padding: 3px 2px 3px 4px;
                        font-size: 12px;
                        color: #fff;
                        border-radius: 5px 0 0 0;
                        background-color: rgba(0, 0, 0, 0.6);
                    }

                    .meta {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        .comment-btn-box {
                            display: flex;
                            justify-content: flex-end;
                        }
                    }

                    .name {
                        height: 30px;
                        font-size: 13px;
                        color: #444;
                    }

                    .type {
                        line-height: 1.8;
                        padding: 0 8px;
                        margin-top: 5px;
                        font-size: 12px;
                        align-self: flex-start;
                        border-radius: 2px;
                        color: #888;
                        background-color: #f7f7f8;
                    }

                    .more {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 12px;
                        color: #333;
                    }
                }

                .payment {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    line-height: 1;
                    padding: 10px 0;
                    text-align: right;
                    color: #999;
                    font-size: 14px;
                    border-bottom: 1px solid #eee;

                    .quantity {
                        font-size: 12px;
                        margin-right: 8px;
                    }

                    .amount {
                        color: #444;
                        margin-left: 3px;
                    }

                    .symbol {
                        font-size: 10px;
                    }
                }

                .action {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    padding-top: 10px;

                    .button {
                        width: 90px;
                        height: 30px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-left: 10px;
                        border-radius: 30px;
                        border: 1px solid #ccc;
                        font-size: 13px;
                        color: #444;
                    }

                    .secondary {
                        color: #27ba9b;
                        border-color: #27ba9b;
                    }

                    .primary {
                        color: #fff;
                        background-color: #27ba9b;
                    }

                    .delete {
                        color: red;
                        border-color: red;
                    }

                    .refund {
                        color: #ff9240;
                        border-color: #ff9240;
                    }
                }
            }
        }
        .blank {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: 140px;
            height: 60vh;
            .image {
                width: 200px;
                height: 141px;
            }
            .text {
                color: #444;
                font-size: 13px;
                margin: 10px 0;
            }
            .button {
                width: 120px !important;
                height: 30px;
                line-height: 30px;
                margin-top: 10px;
                font-size: 13px;
                border-radius: 30px;
                color: #fff;
                background-color: #27ba9b;
            }
        }
    }
}


.popup-root {
  padding: 15px 15px 0;
  border-radius: 5px 5px 0 0;
  overflow: hidden;

  .title {
    font-size: 15px;
    text-align: center;
    margin-bottom: 15px;
    font-weight: bold;
  }

  .description {
    font-size: 14px;
    padding: 0 10px;

    .tips {
      color: #444;
      margin-bottom: 6px;
    }

    .cell {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      color: #666;
    }

    .icon {
      font-size: 19px;
      color: #999;
    }

    .icon-checked {
      font-size: 19px;
      color: #27ba9b;
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    padding: 15px 0 20px;
    font-size: 14px;
    color: #444;

    .button {
      flex: 1;
      height: 36px;
      text-align: center;
      line-height: 36px;
      margin: 0 10px;
      color: #444;
      border-radius: 36px;
      border: 1px solid #ccc;
    }

    .primary {
      color: #fff;
      background-color: #27ba9b;
      border: none;
    }
  }
}

.comment-popup {
    padding: 15px 0;
    overflow: hidden;
    .comment-title {
        font-size: 15px;
        text-align: center;
        margin-bottom: 15px;
        font-weight: bold;
    }
    .comment-description {
        font-size: 14px;
        border-top: 0.5px solid gainsboro;
        .goods-box {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            .goods-cover-box {
                width: 70px;
                height: 70px;
                .goods-cover {
                    width: 70px;
                    height: 70px;
                }
            }
            .goods-name-sku-box {
                margin-left: 10px;
                width: 80%;
                .goods-sku {
                    font-weight: bold;
                    margin-bottom: 5px;

                    white-space:nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;

                }
                .goods-name {
                    font-size: 13px;
                }
            }
        }
        .upload-image-box {
            padding: 10px;
        }
        .rate-box {
            padding: 10px;
            .rate-item {
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                .rate-text {
                    font-size: 16px;
                    margin-right: 20px;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>

